<template>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
        <template #header>
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-button type="primary" @click="parseToJson">格式化</el-button>
                    <el-button type="primary" @click="parseToStruct">转为Golang结构体</el-button>
                    <!-- <el-button type="primary" @click="parseToYaml">转为YAML</el-button> -->
                </el-col>
            </el-row>
        </template>

        <div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-input v-model="jsonString" rows="25" placeholder="请输入json字符串内容" type="textarea" />
                </el-col>
                <el-col :span="12">
                    <pre id="result">{{ result }}</pre>
                </el-col>
            </el-row>
        </div>



    </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElNotification } from 'element-plus';
import { JsonToStructGo } from '../wailsjs/go/utool/App';


// ----数据定义区域 START----
const jsonString = ref('')
const result = ref('')

// ----数据定义区域 END----

// ----方法定义区域 START----
const parseToJson = () => {
    if (jsonString.value.trim() == '' || jsonString.value == null) {
        ElNotification.error({ title: '请输入json字符串' })
        return
    }

    let jsonObj = JSON.parse(jsonString.value)
    result.value = JSON.stringify(jsonObj, null, 4)
}

const parseToStruct = () => {
    JsonToStructGo(jsonString.value).then(res => {
        if (res.code != 1) {
            ElNotification.error({ title: res.msg })
            return
        }
        result.value = res.data
    })
}

const parseToYaml = () => {
}

</script>

<style scoped>
#result {
    margin: 0;
    padding: 5px 11px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    height: 525px;
    overflow: scroll;
}
</style>